<!--  -->
<template>
  <div class="DDimport">
    <el-form ref="form" :model="form" label-width="80px" size="mini" style="display: flex">
      <el-form-item label="使用时间">
        <el-date-picker v-model="form.usedTimeBegin" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker v-model="form.usedTimeEnd" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="关键字">
        <el-input v-model="form.name"></el-input>
      </el-form-item> -->
      <el-form-item>
        <div style="display: flex">
          <el-button style="margin: 0 20px 0 0" size="mini" type="primary" @click="DDquery()">查询</el-button>


        </div>
        <!-- <el-button size="mini" type="primary">查询</el-button> -->
        <!-- <span style="margin:0 0 0 20px;">模板下载</span> -->
      </el-form-item>

      <el-form-item>
        <el-upload class="upload-demo" action="/file/fileMapping/upload" :on-success="uploadedsuccessfullyaaaaa"
          :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1"
          :on-exceed="handleExceed">
          <el-button size="mini" type="primary">导入</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>=
        <download-excel class="querybutton" :data="travelSupplierVoList" :fields="json_fields" worksheet="My Worksheet"
          name="加卷数据列表">
          模板下载
        </download-excel>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table size="mini" style="width: 95%; margin: 15px" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" id="tableTop" :data="travelSupplierVoList" border stripe>
      <el-table-column label="手机号" prop="customerPhone" width="180"></el-table-column>
      <!-- <el-table-column label="供应商类型" prop="supplierType">
                <template slot-scope="scope">
                    <template v-if="scope.row.supplierType == 'group'">团供应商</template>
                    <template v-if="scope.row.supplierType == 'insurance'">保险供应商</template>
                </template>
            </el-table-column> -->
      <el-table-column label="开通时间" prop="validTime" width="180"></el-table-column>

      <el-table-column label="失效日期" prop="invalidTime" width="100"></el-table-column>
      <el-table-column label="使用时间" prop="usedTime" width="180"></el-table-column>
      <el-table-column label="使用金额" prop="usedAmount" width="180"></el-table-column>
      <el-table-column label="出发地" prop="departure"></el-table-column>
      <el-table-column label="到达地" prop="arrival"></el-table-column>
      <!-- <el-table-column label="操作" prop="createTime">
                <template slot-scope="scope">
                    <el-button style="background-color: #6090ec; color: #fff" size="mini"
                        @click="editDialog(scope.row)">修改
                    </el-button>
                    <el-button @click="deleteSupplier(scope.row)" style="background-color: #ff0000; color: #fff"
                        size="mini">删除
                    </el-button>
                </template>
            </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "DDimport",
    data() {
      //这里存放数据
      return {
        //导出的表格的数据
        json_fields: {
          手机号: "customerPhone",
          金额: "couponAmount",
          开通日期: "validTime",
          失效日期: "invalidTime",
        },
        form: {
          usedTimeBegin: "",
          usedTimeEnd: ""
        },
        travelSupplierVoList: [],
        //分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
      };
    },
    components: {},
    //方法集合
    methods: {
      // 导入成功后的回调
      uploadedsuccessfullyaaaaa(row) {
        console.log(row);
        this.payFile = row.data[0].url;
        this.getddCouponUseduploadFile(this.payFile);
      },
      //文件上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`抱歉，当前只能上传一个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      // 上传
      getddCouponUseduploadFile(filePath) {
        this.$axios
          .getddCouponUseduploadFile({
            filePath: filePath,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.getddCouponUsedlist();
            }
          });
      },
      DDquery() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getddCouponUsedlist()
      },
      getddCouponUsedlist() {
        this.$axios.getddCouponUsedlist({
          usedTimeBegin: this.form.usedTimeBegin,
          usedTimeEnd: this.form.usedTimeEnd

        }).then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.travelSupplierVoList = res.data;
            this.pageTotal = res.total;
          }
        });
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getddCouponUsedlist();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);

        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getddCouponUsedlist();
        // orders = res.data;
      },
    },
    created() {},
    mounted() {
      this.getddCouponUsedlist();
    },
  };
</script>
<style scoped>
  .DDimport {
    margin: 20px;
  }

  .querybutton {
    text-align: center;
    width: 56px;
    height: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
  }
</style>